<template>
  <div class="personal-center">
    <!-- 个人信息卡片 -->
    <div class="user-info-card">
      <div class="user-basic">
        <div class="user-avatar">
          <img :src="userInfo.avatar" alt="用户头像" style="width: 60px; height: 60px;">
        </div>
        <div class="user-detail">
          <h2>{{ userInfo.name }}</h2>
          <p>{{ calculateAge(userInfo.birthDate) }}岁&nbsp;|{{ userInfo.gender }}&nbsp;|&nbsp;{{
            getEducationText(userInfo.education) }}</p>
          <p><i class="el-icon-location-outline"></i>{{ userInfo.location }}</p>
        </div>
        <div class="user-expect">
          <p>期待岗位：{{ userInfo.expectedPosition }}</p>
          <p>期待薪资：{{ userInfo.expectedSalary }}</p>
        </div>
      </div>

      <!-- 投递状态统计 -->
      <div class="delivery-tabs">
        <!-- 状态切换标签 -->
        <div class="tab-nav">
          <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === tab.key }"
            @click="currentTab = tab.key">
            <span class="num">{{ getTabCount(tab.key) }}</span>
            <span class="label">{{ tab.label }}</span>
          </div>
        </div>

        <!-- 内容列表 -->
        <!-- 内容列表（拆分渲染） -->
        <div class="content-list">
          <!-- 已投递列表 -->
          <template v-if="currentTab === 'deliver'">
            <div>
              <div v-if="deliverList.length > 0">
                <div v-for="(item, idx) in deliverList" :key="idx" class="list-item">
                  <!-- 已投递列表的独立渲染逻辑 -->
                  <div class="left-info">
                    <div class="person-info">
                      <img :src="item.avatar" alt="avatar" class="avatar" />
                      <div class="name-role">
                        <span class="name">{{ item.name }}</span>
                        <span class="role">{{ item.role }}</span>
                      </div>
                    </div>
                    <div class="job-info">
                      <span class="job-title">{{ item.positionName }}</span>
                      <div class="tags">
                        <span class="tag">{{ item.positionType }}</span>
                        <span class="tag">{{ item.startAt.slice(-8) }}-{{ item.endAt.slice(-8) }}</span>
                        <span class="tag">{{ getEducationText(item.education) }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="right-company">
                    <div class="salary-info">
                      <span class="salary">{{ item.lowestSalaryMonth }}-{{ item.highestSalaryMonth }}</span>
                    </div>
                    <div class="company-info">
                      <span class="company-name">{{ item.location }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <p>暂无已投递的岗位</p>
              </div>
            </div>
          </template>

          <!-- 面试列表 -->
          <template v-else>
            <div>
              <div v-if="interviewList.length > 0">
                <div v-for="(item, idx) in interviewList" :key="idx" class="list-item">
                  <!-- 面试列表的独立渲染逻辑（适配不同数据结构） -->
                  <div class="left-info">
                    <div class="person-info">
                      <img :src="item.avatar" alt="avatar" class="avatar" />
                      <div class="name-role">
                        <span class="name">{{ item.name }}</span>
                        <span class="role">{{ item.role }}</span>
                      </div>
                    </div>
                    <div class="job-info">
                      <span class="job-title">{{ item.jobTitle }} {{ item.location }}</span>
                      <div class="tags">
                        <span v-for="(tag, tagIdx) in item.tags" :key="tagIdx" class="tag">{{ tag }}</span>
                      </div>
                      <span class="salary">{{ item.salaryRange }}</span> <!-- 假设面试列表薪资字段是 salaryRange -->
                    </div>
                  </div>
                  <div class="right-company">
                    <img :src="item.companyLogo" alt="companyLogo" class="company-logo" />
                    <div class="company-info">
                      <span class="company-name">{{ item.companyName }}</span>
                      <div class="company-tags">
                        <span v-for="(companyTag, companyTagIdx) in item.companyTags" :key="companyTagIdx"
                          class="company-tag">{{ companyTag }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <p>暂无面试的岗位</p>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import { mapState } from 'vuex';
import { getSeekerDeliveryList, getSeekerInterviewList } from '@/util/seeker_api/delivery_api';

export default {
  name: 'PersonalCenter',
  data() {
    return {
      educationMap: {
        OTHER: '其他',
        MASTER: '硕士',
        UNDERGRADUATE: '本科',
        COLLEGE: '专科',
        DOCTOR: '博士'
      },
      tabs: [
        { key: "deliver", label: "已投递" },
        { key: "interview", label: "面试" }
      ],
      currentTab: "deliver", // 默认选中“已投递”
      deliverList: [],
      interviewList: []
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.seeker.userInfo
    }),
    currentList() {
      return this.currentTab === "deliver" ? this.deliverList : this.interviewList;
    },
  },
  methods: {
    //学历枚举值映射
    getEducationText(enumValue) {
      return this.educationMap[enumValue] || enumValue;
      // 若没找到映射，默认返回原始值（可选逻辑，根据需求调整）
    },

    // 传入出生年月字符串（如 '1990-05' 或 '1990-05-12'）
    calculateAge(birthDateStr) {
      if (!birthDateStr) return '';
      const birthDate = new Date(birthDateStr);
      const today = new Date();

      let age = today.getFullYear() - birthDate.getFullYear();
      const monthDiff = today.getMonth() - birthDate.getMonth();

      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
        age--;
      }

      return age > 0 ? age : 0;
    },

    //获取投递列表
    async getDeliveryList() {
      try {
        const response = await getSeekerDeliveryList();
        this.deliverList = response.data;
        console.log("投递列表:", this.deliverList);
      } catch (error) {
        console.error('获取投递列表失败:', error);
      }
    },

    //获取面试列表
    async getInterviewList() {
      try {
        const response = await getSeekerInterviewList();
        this.interviewList = response.data;
        console.log("面试列表:", this.interviewList);
      } catch (error) {
        console.error('获取面试列表失败:', error);
      }
    },

    //获取标签数量
    getTabCount(tabKey) {
      return tabKey === "deliver"
        ? this.deliverList.length
        : this.interviewList.length;
    }
  },
  created() {
    this.getDeliveryList();
    this.getInterviewList();
  }
}
</script>

<style scoped>
.personal-center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.user-info-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-basic {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-detail {
  margin-left: 20px;
}

.user-expect p {
  text-align: left;
  font-size: 18px;
}

.user-expect {
  margin-left: 100px;
}

/* 投递状态统计 */
.delivery-tabs {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}

/* 标签导航样式 */
.tab-nav {
  display: flex;
  border-bottom: 1px solid #f2f2f2;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  cursor: pointer;
  color: #666;
}

.tab-item.active {
  color: #0084ff;
  border-bottom: 2px solid #0084ff;
  font-weight: bold;
}

.tab-item .num {
  font-size: 14px;
  margin-right: 4px;
  color: #333;
}

.tab-item .label {
  font-size: 14px;
}

/* 内容列表样式 */
.content-list {
  padding: 16px;
}

.list-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #f2f2f2;
}

/* 左侧信息样式 */
.left-info {
  width: 60%;
  margin-right: 16px;
}

.salary-info{
  width: 200px;
margin-right: 50px;

}

.person-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}


.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
}

.name-role .name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-right: 8px;
}

.name-role .role {
  font-size: 14px;
  color: #999;
}

.job-info .job-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  display: block;
  font-weight: 500;
}

.job-info .location {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tag {
  background-color: #f9fafc;
  border: 1px solid #ebeef5;
  color: #909399;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  margin-right: 6px;
  margin-bottom: 4px;
}

.salary .salary-text {
  font-size: 12px;
  color: #ff5050;
  display: block;
  margin-top: 4px;
}

/* 右侧公司信息样式 */
.right-company {
  display: flex;
  align-items: center;
  height: 100%;
  margin-top: 35px;
}

.company-logo {
  width: 36px;
  height: 36px;
  margin-right: 8px;
}

.company-info .company-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}

.company-tags {
  display: flex;
  flex-wrap: wrap;
}

.company-tag {
  background-color: #f9fafc;
  border: 1px solid #ebeef5;
  color: #909399;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  margin-right: 6px;
  margin-bottom: 4px;
}

/* 其他样式... */
</style>